<template>
	<div>
		<!--<header class="aui-header">
				<a class="aui-pull-left aui-btn">
			<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">{{headlist.userNickName}}店铺</div>
		</header>-->
		<!--<div class="myshopCon" :style="{backgroundImage:'url('+ backImg +')'}">-->
			<div class="shopersonal">
				<div class="peronalcon">
					<div class="userimg"><img :src="headlist.userImg"></div>
					<span class="username">{{headlist.userNickName}}</span>
				</div>
			</div>
		</div>
		<div class="samebanner"><img src="../assets/Shopowner.jpg"></div>
		<div class="goodsrecomend">
			<ul :style="{width:newWidth+'px'}">
				<li class="samerecgoods" v-for="item in gromlist.list">
					<div v-if="item.spuPlatform == 'yh'" @click="yhDetail(item.id)">
						<div class="recgoodsimg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						</div>
						<div class="recgoodsname">{{item.goodsName}}</div>
						<div class="recgoodprice">
							<span class="orginprice">￥{{item.price}}</span>
							<span class="activeprice">到手价:￥{{item.conPrice}}</span>
						</div>
						<div class="recgoodcoup">
							<div class="redcoupon">{{item.couponMoney}}元券</div>
							<span class="rectotalsum">已抢{{item.totalSales}}/评价</span>
						</div>
					</div>
					<div v-else-if="item.spuPlatform == 'jd'" @click="jdDetail(item.id,item.couponMoney)">
						<div class="recgoodsimg">
							<img :src="item.mainImageUrl">
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						</div>
						<div class="recgoodsname">{{item.goodsName}}</div>
						<div class="recgoodprice">
							<span class="orginprice">￥{{item.price}}</span>
							<span class="activeprice">到手价:￥{{item.conPrice}}</span>
						</div>
						<div class="recgoodcoup">
							<div class="redcoupon">{{item.couponMoney}}元券</div>
							<span class="rectotalsum">已抢{{item.totalSales}}/评价</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="samebanner"><img src="../assets/fireback.jpg"></div>
		<div class="singproduCon">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">

				<li class="sameproli" v-for="item in singlist">
					<div v-if="item.spuPlatform == 'yh'" @click="yhDetail(item.id)">
						<div class="singproimg">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						<div class="singproname">{{item.goodsName}}</div>
						<div class="singprice">
							<span class="singOrginprice">￥{{item.price}}</span>
							<span class="signActiveprice" style='font-weight: bold!important;'>到手价:￥<font style="font-size: 0.32rem;">{{item.conPrice}}</font></span>
						</div>
						<div class="singcoup">
							<div class="redpacketsing">{{item.couponMoney}}元券</div>
							<span class="singtotalsum">已抢{{item.totalSales}}件/评价</span>
						</div>
					</div>
					<div v-else-if="item.spuPlatform == 'jd'" @click="jdDetail(item.id,item.couponMoney)">
						<div class="singproimg">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						<div class="singproname">{{item.goodsName}}</div>
						<div class="singprice">
							<span class="singOrginprice">￥{{item.price}}</span>
							<span class="signActiveprice" style='font-weight: bold!important;'>到手价:￥<font style="font-size: 0.32rem;">{{item.conPrice}}</font></span>
						</div>
						<div class="singcoup">
							<div class="redpacketsing">{{item.couponMoney}}元券</div>
							<span class="singtotalsum">已抢{{item.totalSales}}件/评价</span>
						</div>
					</div>
				</li>

			</ul>
		</div>
	</div>
</template>

<script>
	import { InfiniteScroll } from 'mint-ui';
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				headlist: [],
				gromlist: [],
				singlist: [],
				singjson: [],
				index: 0,
				loading: false,
				backImg: '',
				newWidth: ''
			}
		},
		created() {
			//店铺头部信息
			var headurl = BaseUrl + 'users/yunindex?token=201805150923401569d84a87c766c04dda9803d1676748f748&appId=3898B7B5-91A4-46FA-AFC3-630D1FCD4C95';
			this.$http.get(headurl).then(res => {
				if(res.data.code == "10000") {
					this.headlist = res.data.data;
					this.backImg = this.headlist.userImg;
				}

			})
			//推荐商品
			var groomurl = BaseUrl + 'users/recomGoods?token=201805150923401569d84a87c766c04dda9803d1676748f748&appId=3898B7B5-91A4-46FA-AFC3-630D1FCD4C95';
			this.$http.get(groomurl).then(res => {
				if(res.data.code == "10000") {
					this.gromlist = res.data.data;
					this.newWidth = 165 * parseInt(this.gromlist.total);
					//console.log(this.newWidth)
					//+(parseInt(this.gromlist.total)-3)*10
				}

			})
			this.singInfo(this.index);

		},

		methods: {
			singInfo(index) {

				//单品
				var singurl = BaseUrl + 'users/hostGoods?token=201805150923401569d84a87c766c04dda9803d1676748f748&appId=3898B7B5-91A4-46FA-AFC3-630D1FCD4C95';
				this.$http.get(singurl + "&length=10&start=" + this.index).then(res => {
					if(res.data.code == "10000") {
						this.singjson = res.data.data;
						this.singlist = this.singlist.concat(res.data.data.list);
					}
					if(res.data.data.isMore == "none") {
						this.loading = true;
						return;
					} else if(res.data.data.isMore == "have") {
						this.loading = false;
						this.index++;
					}
					//console.log(this.singlist, this.index)
				})
			},
			loadMore() {

				this.loading = true;
				//alert(this.index);

				setTimeout(() => {
					this.singInfo(this.index);
					this.loading = false;
				}, 2500);

			},
			jdDetail: function(obj, id) {
				var jdUrl;
				if(id == 0) {
					jdUrl = BaseUrl + 'jd/getUrl?spuId=' + obj + '&token=201805150923401569d84a87c766c04dda9803d1676748f748&appId=3898B7B5-91A4-46FA-AFC3-630D1FCD4C95';
				} else {
					jdUrl = BaseUrl + 'jd/getConUrl?spuId=' + obj + '&token=201805150923401569d84a87c766c04dda9803d1676748f748&appId=3898B7B5-91A4-46FA-AFC3-630D1FCD4C95';
				}

				this.$http.get(jdUrl).then(res => {

					if(res.data.code == "10000") {
						window.location.href = res.data.data
					} else {
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						});
					}

				})
			},
			yhDetail: function(obj) {
				this.$router.push({
					path: '/redpackage?goodsId=' + obj
				})
			}

		},

	}
</script>
<style scoped="scoped">
	.myshopCon {
		/*margin-top: 1rem;*/
		background: url(../assets/w.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
	.shopersonal {
		width: 100%;
		height: 3rem;
		/*background-color: rgba(0, 0, 0, 0.4);*/
	}
	
	.peronalcon {
		width: 100%;
		height: 1rem;
		top: 1.7rem;
		position: relative;
		display: inline-flex;
	}
	
	.userimg {
		width: 1rem;
		height: 1rem;
		margin-left: 0.25rem;
	}
	
	.userimg>img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.username {
		line-height: 1rem;
		margin-left: 0.2rem;
		color: #FFFFFF;
		font-size: 0.28rem;
	}
	/**广告***/
	
	.samebanner {
		width: 100%;
		height: 0.8rem;
		background: red;
	}
	
	.samebanner>img {
		width: 100%;
		height: 100%;
	}
	/**推荐商品**/
	
	.goodsrecomend {
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		box-sizing: border-box;
	}
	
	.goodsrecomend>ul {
		font-size: 0;
		height: 100%;
		width: 1000px;
	}
	
	.samerecgoods {
		width: 3.2rem;
		display: inline-block;
		background: #FFFFFF;
		margin-left: 0.1rem;
		position: relative;
	}
	
	.samerecgoods:nth-child(1) {
		margin-left: 0rem;
	}
	
	::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}
	
	.recgoodsimg {
		width: 2.98rem;
		height: 2.98rem;
		background: blue;
		margin: 0 auto;
		margin-top: 0.1rem;
	}
	
	.recgoodsimg>img {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.65rem;
		float: right;
	}
	
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.65rem;
		float: right;
	}
	
	.recgoodsname {
		font-size: 0.28rem;
		margin: 0 0.1rem;
		margin-top: 0.1rem;
		height: 0.6rem;
		overflow: hidden;
		line-height: 0.3rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #323232;
	}
	
	.recgoodprice {
		margin: 0 0.1rem;
		display: block;
	}
	
	.orginprice {
		font-size: 0.24rem;
		color: #989898;
	}
	
	.activeprice {
		float: right;
		font-size: 0.24rem;
		color: #FF2040;
	}
	/**优惠券**/
	
	.recgoodcoup {
		margin: 0 0.25rem;
		margin-bottom: 0.2rem;
		margin-top: 0.15rem;
	}
	
	.redcoupon {
		width: 1.08rem;
		height: 0.28rem;
		background: url(../assets/coupn.png);
		background-size: 100%;
		text-align: center;
		line-height: 0.28rem;
		font-size: 0.23rem;
		color: #FFFFFF;
		display: inline-block;
	}
	
	.rectotalsum {
		float: right;
		color: #989898;
		font-size: 0.24rem;
	}
	/****单品****/
	
	.singproduCon {
		width: 100%;
	}
	
	.singproduCon>ul {
		font-size: 0;
	}
	
	.sameproli {
		width: 49.3%;
		background: #FFFFFF;
		margin-top: 0.2rem;
		display: inline-block;
		padding: 0.10rem;
	}
	
	.sameproli:nth-child(1) {
		margin-top: 0rem;
	}
	
	.sameproli:nth-child(2) {
		margin-top: 0rem;
	}
	
	.sameproli:nth-child(even) {
		margin-left: 0.1rem;
	}
	
	.singproimg {
		width: 3.51rem;
		height: 3.51rem;
		/*background-color: red;*/
	}
	
	.singproimg>img {
		width: 100%;
		height: 100%;
	}
	
	.singproname {
		width: 100%;
		color: #323232;
		height: 0.7rem;
		margin-top: 0.1rem;
		line-height: 0.35rem;
		font-size: 0.28rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		display: block;
	}
	
	.singprice {
		font-size: 0;
	}
	
	.singOrginprice {
		display: inline-block;
		font-size: 0.28rem;
		color: #989898;
		line-height: 0.55rem;
		
	}
	
	.signActiveprice {
		display: inline-block;
		float: right;
		font-size: 0.25rem;
		color: #FF2040;
		
	}
	
	.singcoup {
		width: 100%;
		font-size: 0;
	}
	
	.redpacketsing {
		width: 1.08rem;
		height: 0.28rem;
		background: url(../assets/coupn.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		text-align: center;
		line-height: 0.28rem;
		font-size: 0.23rem;
		display: inline-block;
		margin-top: 0.05rem;
	}
	
	.singtotalsum {
		float: right;
		font-size: 0.28rem;
		color: #989898;
	}
</style>